<ui:composition
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

        <p:panel id="pnlLogin"  header="Ingreso al sistema" style="width: 400px; margin: auto; margin-top: 20px;">
            
            <div class="ui-grid-responsive">
                <div class="ui-grid-row">
                    <div class="ui-grid-col-12" >
                        <p:messages id="msgs" showDetail="true"/>
                        
                        <h:panelGroup rendered="#{usuarioSession.muestroMensajeExpirado}">
                            <div class="ui-messages ui-widget">
                                <div class="ui-messages-info ui-corner-all">
                                    <span class="ui-messages-info-icon"></span>
                                    <ul>
                                        <li>
                                            <span class="ui-messages-error-summary">Su sesión en nuestra plataforma ha finalizado</span>
                                        </li>
                                        <li>
                                            <span class="ui-messages-error-summary">Vuelva a ingresar por favor</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </h:panelGroup>
                        
                    </div>                    
                </div>
                <div class="ui-grid-row">
                    
                    <div class="ui-grid-col-3" >
                        <h:graphicImage value="/resources/image/key.png" width="100%" />
                    </div>
                    
                    <div class="ui-grid-col-2" ></div>
                    
                    <div class="ui-grid-col-7" >
                        
                        <div class="ui-grid-row" style="padding: 0.1em; padding-top: 1.3em;" >
                            <p:inputText id="txtUsuario" value="#{usuarioSession.usuario.usuario}" required="true"  
                                     placeholder="Usuario"
                                     requiredMessage="Ingrese el usuario" size="30"  >
                                <f:validateLength minimum="4" maximum="30" />
                            </p:inputText>
                        </div>
                        
                        <div class="ui-grid-row" style="padding: 0.1em;">
                            
                            <p:password value="#{usuarioSession.usuario.password}" feedback="false"
                                    maxlength="20" required="true"
                                    placeholder="Clave"
                                    requiredMessage="Ingrese la clave" size="30"  />
                            
                        </div>                        
                        
                        <div class="ui-grid-row" style="padding: 0.5em;">
                            
                            <p:commandButton id="btnLogin" value="Ingresar" action="#{usuarioSession.login}" ajax="false"
                                         onclick="PF('ajaxStatus3').show()"/>

                            <p:commandButton value="Limpiar" type="reset" immediate="true" />
                        
                        </div>
                        

                        
                    </div>
                </div>
            </div>
            
        </p:panel>

        <p:dialog widgetVar="ajaxStatus3" showHeader="false" width="200" resizable="false"  closable="false">
            <div style="text-align: center">

                <h:panelGrid columns="2">

                    <h:panelGroup>
                        <p:graphicImage value="/resources/imgAjax/ajax-loader-II.gif" />
                        <p:spacer width="10"/>
                    </h:panelGroup>

                    <h:panelGroup>
                        <h:outputText value="Aguarde por favor..." />
                    </h:panelGroup>

                </h:panelGrid>
            </div>
        </p:dialog>
    
</ui:composition>